<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来用，不能当做方法调用，不能加小括号， -->
    <input type="text" v-model.lazy="xing">
    <span>+</span>
    <input type="text" v-model.lazy="ming">
    <span>=</span>
    <input type="text" v-model.lazy="fullName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing:'李',
      ming:'四'
    }
  },
  //计算属性要写到和data 平级的computed 中
  computed: {
    //所有的计算属性都放这里,【计算属性，必须放回计算的结构】
    // fullName() {
    //   return this.xing + ' ' + this.ming
    // }

    //如果需要修改计算属性的值，需要写成对象模式，（对象中需要写get和set方法）
    fullName: {
      //当使用计算属性时，get就执行了
      get() {
        return this.xing + ' ' + this.ming
      },
      //当修改计算属性时，set就执行了。形参就是修改后的结果
      set(val) {
        let arr = val.split(' ')
        this.xing = arr[0]
        this.ming = arr[1]
      }
    }
  }
}
</script>

<style>

</style>